<template>
	<view id="app">
		<view class="toubu">
			<uni-icons type="map-pin-ellipse" size="16">洛阳</uni-icons>
			<uni-icons type="plus" size="30" style="25px "></uni-icons>
		</view>
		<view class="suosou">
			<input type="text" placeholder="请输入内容">
			<uni-icons type="search" size="20" class="button"></uni-icons>
		</view>
		<view style="padding: 5px 0 0 0; margin-bottom: 5px;">
			<liu-slide-img :list="list" :type="2" :autoplay="autoplay" :interval="interval" @change="change"
				@click="click"></liu-slide-img>
		</view>
		<!-- 分栏间隔 -->
		<view class="gongneng">
			<view class="u-demo-block__content">
				<u-row justify="space-between" gutter="0">
					<u-col span="3">
						<view class="demo-layout bg-purple">
							1111
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							2222
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple">
							3333
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							4444
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="u-demo-block__content">
				<u-row justify="space-between" gutter="0">
					<u-col span="3">
						<view class="demo-layout bg-purple">
							1111
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							2222
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple">
							3333
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout bg-purple-light">
							4444
						</view>
					</u-col>
				</u-row>
			</view>
		</view>


		<view class="renwu">
			<u-sticky bgColor="#fff" class="daohang">
				<u-tabs :list="sortList" @click="getThisId"></u-tabs>
			</u-sticky>
			<view v-for="(item,index) in newAllList">
				<view class="yangshi">
					<u-row justify="space-between" customStyle="margin: 3px">
						<u-col span="3">
							<center></center>
							<view class="demo-layout bg-purple-light">
								<h2 style="color: red;">
									￥{{item.price}}
								</h2>
							</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout bg-purple">
								<h3 style="color: red;">
									30 分钟
								</h3>
							</view>
						</u-col>
					</u-row>
					<u-row justify="space-between" gutter="10">
						<u-col span="10">
							<div class="demo-layout bg-purple-light" style="margin: 8px; 0">
								<b>
									{{item.title}}
								</b>
							</div>
						</u-col>
					</u-row>
					<u-row justify="space-between" customStyle="margin: 3px">
						<u-col span="3">
							<view class="demo-layout bg-purple-light">
								任务进度
							</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout bg-purple" style="text-align: right;">
								{{item.initiatorName}}
							</view>
						</u-col>
					</u-row>
				</view>
				<view style="height: 5px;"></view>
			</view>
		</view>





		<view>
			<uni-icons type="plusempty" size="55" class="tianjia"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aQuest: {
					pageNum: 1,
					pageSize: 10,
					title: null,
					content: null,
					cover: null,
					sortId: null,
				},
				sortList: [],
				newAllList: [],

				list: [{
						src: "../../static/tubiao/test/R-C.jpg"
					},
					{
						src: "../../static/tubiao/test/R-C (1).jpg"
					},
					{
						src: "../../static/tubiao/test/R-C (2).jpg"
					},
					{
						src: "../../static/tubiao/test/R-C (3).jpg"
					},
					{
						src: "../../static/tubiao/test/v2-4731ec5261a677093cdefdebaff179c7_r.jpg"
					},
					{
						src: "../../static/tubiao/test/9395.jpg_wh860.jpg"
					},
				],

				autoplay: true,
				interval: 2500

			};
		},
		methods: {
			//当前轮播索引
			// change(e) {
			// 	console.log('==========', e)
			// },
			//点击轮播
			click(e) {
				console.log('点击轮播', e)
			},

			getThisId(item) {
				this.aQuest.sortId = item.id;
				this.getAllList();
				console.log(this.aQuest.sortId);


			},

			getAllList() {
				const data = this.aQuest;
				this.$axios.get("/api/kaifa/quest/list", {
					params: data
				}).then(res => {
					this.sortList = res.data.sortList;
					console.log("this.data.list", res.data.list)
					this.newAllList = res.data.list.rows;
					console.log("this.newAllList", this.newAllList);
				})
			}


		},
		mounted() {
			this.getAllList();
		}
	}
</script>

<style lang="scss" scoped>
	#app {
		width: 100%;
		height: 700px;
		// border: 1px red solid;
		padding-top: 28px;
		position: relative;

		.toubu {
			width: 95%;
			height: 30px;
			display: flex;
			margin: 0 9px;
			align-items: center;
			justify-content: space-between;
		}

		.gongneng {
			width: auto;
			height: auto;
			padding: 5px 0;
			border-radius: 10px;
			background-color: #e5e9f2;
		}

		.suosou {
			margin: 0 auto;
			height: 25px;
			width: 80%;
			border: 1px black solid;
			padding: 6px;
			display: flex;
			border-radius: 20px;
			flex-direction: row;
			align-items: center;
			justify-content: space-evenly;


			input {

				margin: 8px;
				height: 25px;
				width: 80%;
				border: none
			}



		}

		.u-demo-block__content {
			width: auto;
			// padding-top: 10px;
			margin: 8px 0;

			.wrap {
				padding: 12px;
			}

			.demo-layout {
				height: 55px;
				width: 57px;
				text-align: center;
				line-height: 55px;
				border-radius: 5px;
				margin: 0 auto;
			}

			.bg-purple {
				background: #CED7E1;
			}

			.bg-purple-light {
				background: #CED7E1;
			}

			.bg-purple-dark {
				background: #CED7E1;
			}

		}

		.tianjia {
			width: 55px;
			height: 55px;
			border: 1px black solid;
			border-radius: 55px;
			position: absolute;
			right: 20px;
			bottom: 40px;
		}

		.renwu {

			width: 100%;
			// border: 1px black solid;

			.daohang {
				width: 95%;
				margin: 3px auto;
				// border: 1px red solid;
			}

			.yangshi {
				margin: 0 auto;
				padding: 6px 0;
				// border: 1px darkgoldenrod solid;	
				width: 98%;
				height: auto;
				text-align: center;
				border-radius: 5px;
				background-color: #e5e9f2;
			}

			// view {
			// 	text-align: center !important;
			// }
		}

	}
</style>